<template>
  <div class="autoBox" @click="closeAll" :style="{height:$height-159+'px',overflow:'hidden'}">
    <header>
      <span class="auto_title">社交自动化</span>
      <a href="javascript:void(0)">
        <b class="search-roll">
          <input type="text" placeholder="输入模板名称查找" class="search" v-model="keyWord"
                 @keyup.enter="handleCurrentChange(1)">
          <i class="el-icon-search" @click="handleCurrentChange(1)"></i>
        </b>
        <el-button size="mini" type="primary" class="new-btn" @click="$refs.socialDialog.reset()" id="addSocialRule">+创建社交自动规则
        </el-button>
      </a>
    </header>
    <div class="common-list">
      <table class="temp-table">
        <thead>
        <tr>
          <th style="width:1px;padding: 3px 7px"></th>
          <th style="width: 128px">规则名称</th>
          <th style="cursor: pointer;width: 100px"><span @click.stop="isShow=!isShow">创建人<i
            class="el-icon-arrow-down"></i></span>
            <div class="menus" v-show="isShow" @click.stop="isShow=true">
              <el-checkbox v-model="checked" @change="handleChange">所有人</el-checkbox>
              <el-checkbox-group v-model="checkList" @change="handle">
                <el-checkbox :label="item" v-for="item,index in account" :key="index"></el-checkbox>
              </el-checkbox-group>
            </div>
          </th>
          <th style="width: 150px">创建时间</th>
          <th style="width: 120px">发布平台</th>
          <th style="width: 70px">是否启用</th>
          <th style="width: 140px">操作</th>
        </tr>
        </thead>
        <tbody :style="{minHeight:HEIGHT-239+'px'}">
        <div v-for="item,index in tableData" :key="index">
          <tr>
            <td style="width:1px;padding: 3px 7px" @click="toggle($event)"><i class="el-icon-arrow-down"></i></td>
            <td @click="toggle($event)" class="more" style="width: 128px;" :title="item.name">{{item.name}}</td>
            <td @click="toggle($event)" style="width: 100px">{{item.createName}}</td>
            <td @click="toggle($event)" style="width: 150px">{{item.createTime}}</td>
            <td style="width: 120px" @click="toggle($event)">
              <img v-show="item.facebookEnable" @click.stop="item.isMine?$refs.socialDialog.reset(item):empty"
                   :title="`Facebook发布时间:${item.facebookPublishTime}`"
                   style="width: 27px;margin-right: 10px;vertical-align: bottom;" src="../../../../public/img/icon/facebook.png" alt="">
              <img v-show="item.twitterEnable" @click.stop="item.isMine?$refs.socialDialog.reset(item):empty"
                   :title="`Twitter发布时间:${item.twitterPublishTime}`"
                   style="width: 27px;margin-right: 10px;vertical-align: bottom;" src="../../../../public/img/icon/Twitter.png" alt="">
              <img v-show="item.linkedinEnable" @click.stop="item.isMine?$refs.socialDialog.reset(item):empty"
                   :title="`Linkedin发布时间:${item.linkedinPublishTime}`"
                   style="width: 27px;margin-right: 10px;vertical-align: bottom;" src="../../../../public/img/icon/linkedin.png" alt="">
            </td>
            <td style="width: 70px">
              <el-switch @change="(value) => changeUse(item,item.id,value)"
                         :title="item.ruleEnable?'停用':'启用'" :disabled="!item.isMine"
                         v-model="item.ruleEnable" style="width:30px">
              </el-switch>
            </td>
            <td style="width: 140px" @click="toggle($event)">
              <span class="icon-review iconBtn" title="预览社交模板" @click.stop="preview(item.id)"></span>
              <span class="icon-copy iconBtn" title="复制邮件模板" @click.stop="copy(item)"></span>
              <span class="icon-bianji iconBtn" title="编辑" @click.stop="$refs.socialDialog.reset(item)"
                    v-show="item.isMine&&!item.hasRun"></span>
              <span v-show="item.hasRun" class="icon-bianji iconBtn" title="规则启用过一次之后启用中，无法修改规则" style="color: #c0c4cc"
                    @click.stop ="()=>{}"></span>
              <span class="icon-delete_icon iconBtn" title="删除" @click.stop="remove(item.id)"
                    v-show="item.isMine"></span>
            </td>
          </tr>
          <div class="detail" style="display: none">
            <table>
              <thead>
              <tr>
                <th style="width:1px;padding: 3px 7px"></th>
                <th style="width: 128px">发布平台</th>
                <th style="width: 100px"></th>
                <th style="width: 150px">发布时间</th>
                <th style="width: 120px"></th>
                <th style="width: 70px">发布状态</th>
                <th style="width: 140px"></th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="item.facebookEnable">
                <td style="width:1px;padding: 3px 7px"></td>
                <td style="width: 128px" class="put-social"><img :title="`Facebook发布时间:${item.facebookPublishTime}`"
                                              style="width: 27px;margin-right: 5px;margin-bottom: -4px;" src="../../../../public/img/icon/facebook.png" alt=""><span>Facebook</span></td>
                <td style="width: 100px"></td>
                <td style="width: 150px"> {{dealEmpty(item.facebookPublishTime)}}</td>
                <td style="width: 120px"></td>
                <td style="width: 70px" :class="item.twitterPublishStatus?'actives':''">{{dealState(item.facebookEnable,item.facebookPublishStatus)}}</td>
                <td style="width: 140px"></td>
              </tr>
              <tr v-if="item.twitterEnable">
                <td style="width:1px;padding: 3px 7px"></td>
                <td style="width: 128px" class="put-social"> <img :title="`Twitter发布时间:${item.twitterPublishTime}`"
                                               style="width: 27px;margin-right: 5px;margin-bottom: -4px;" src="../../../../public/img/icon/Twitter.png" alt="">Twitter</td>
                <td style="width: 100px"></td>
                <td style="width: 150px">{{dealEmpty(item.twitterPublishTime)}}</td>
                <td style="width: 120px"></td>
                <td style="width: 70px" :class="item.twitterPublishStatus?'actives':''">{{dealState(item.twitterEnable,item.twitterPublishStatus)}}</td>
                <td style="width: 140px"></td>
              </tr>
              <tr v-if="item.linkedinEnable">
                <td style="width:1px;padding: 3px 7px"></td>
                <td style="width: 128px" class="put-social"> <img @click="$refs.socialDialog.reset(item)"
                                                :title="`Linkedin发布时间:${item.linkedinPublishTime}`"
                                                style="width: 27px;margin-right: 5px;margin-bottom: -4px;" src="../../../../public/img/icon/linkedin.png" alt="">Linkedin</td>
                <td style="width: 100px"></td>
                <td style="width: 150px">{{dealEmpty(item.linkedinPublishTime)}}</td>
                <td style="width: 120px"></td>
                <td style="width: 70px" :class="item.linkedinPublishStatus?'actives':''">{{dealState(item.linkedinEnable,item.linkedinPublishStatus)}}</td>
                <td style="width: 140px"></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
        <tr class="empty-img" v-show="isEnd" style="background-color: #fff;border-bottom: 0">
          <td colspan="8" style="background-color: #fff">
            <img src="../../../../public/img/empty.png" alt="">
          </td>
        </tr>
        </tbody>
      </table>
      <el-pagination class="fixed"
                     background align="right"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     :current-page="nowPage"
                     :page-size="nowSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <SocialDialog ref="socialDialog" @getList="getList"></SocialDialog>
    <VueTour ref="vueTour" :steps="steps" name="myTour" type="0" prev="/automation/template/xml"
             path="" @addSocialRule="addSocialRule"></VueTour>
  </div>
</template>

<script>
    import {getList, changeUse, changeShare, copyRule, deleteRow,getNextMan} from "@/api/socialAutomation"
    import SocialDialog from "@/components/automation/SocialDialog"
    import {mapState} from 'vuex'
    import VueTour from '@/components/automation/VueRour'

    export default {
        name: "index",
        components: {SocialDialog, VueTour},
        data() {
            return {
                tableData: [],
                nowPage: 1,
                pageSize: 20,
                total: 0,
                keyWord: '',
                //新增
                account: [],
                checkList: [],
                createNames: '',
                isShow: false,
                checked: false,
                isShow1: false,
                checked1: false,
                statusList: '',
                checkList1: [],
                HEIGHT: document.documentElement.clientHeight,
                steps: [
                    {
                        target: '#addSocialRule',  // We're using document.querySelector() under the hood
                        content: '【社交自动化规则创建】<br>最后一步，点击添加社交自动化规则',
                    },
                ],
                isEnd: false
            }
        },
        computed: {
            ...mapState(['common'])
        },
        created(){
            this.nowPage = this.common.commonPage;
            this.nowSize = this.common.commonPageSize;
        },
        mounted() {
            if (this.common.isFirstSocial) {
                this.$nextTick(() => {
                    this.$refs.vueTour.init();//初始化
                })
            }
            this.getList()
            this.getNextMan();
        },
        watch: {
            isShow: function (val, old) {
                if (!val) {
                    if (this.checkList.length > 0) {
                        //请求数据
                        if (this.checked) {//全选
                            this.createNames = '';
                        } else {
                            this.createNames = this.checkList.join(',');
                        }
                        this.nowPage = 1;
                        this.isShow = false;
                        this.getList();
                    }
                } else {
                    this.createNames = '';
                    this.checked = false;
                    this.checkList = [];
                }
            },
            isShow1: function (val, old) {
                if (!val) {
                    if (this.checkList1.length > 0) {
                        //请求数据
                        if (this.checked1) {//全选
                            this.statusList = '';
                        } else {
                            if (this.checkList1[0] == '等待中') {
                                this.statusList = 0;
                            } else {
                                this.statusList = 1;
                            }
                        }
                        this.nowPage = 1;
                        this.isShow1 = false;
                        this.getList();
                    }
                } else {
                    this.statusList = '';
                    this.checked1 = false;
                    this.checkList1 = [];
                }
            }
        },
        methods: {
            preview(id) {
                let routeData = this.$router.resolve({
                    path: `/automation/socialReview/${id}`,
                    query: {
                        id: id
                    }
                });
                window.open(routeData.href, '_blank');
            },
            empty() {
            },//空处理
            toggle(event) {
                let that = event.currentTarget.parentNode;
                let ele = that.nextElementSibling;
                let eleChild = that.firstElementChild.firstElementChild;
                eleChild.className = eleChild.className == 'el-icon-arrow-down' ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
                let state = ele.style.display;
                ele.setAttribute('style', `display:${state == 'none' ? 'block' : 'none'};`);
            },
            addSocialRule() {
                this.$refs.socialDialog.reset()
            },
            //复制
            copy(item) {
                this.$prompt('请输入复制后的社交规则名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: item.name + '复制',
                    inputPattern: /^.{1,20}$/,
                    inputErrorMessage: '名称长度1-20位字符',
                    closeOnPressEscape:false,
                    closeOnClickModal:false
                }).then(({value}) => {
                    copyRule(item.id, value).then(res => {
                        this.dealEnd(res)
                    })
                }).catch(() => {
                });

            },
            closeAll() {
                this.isShow = false;
                this.isShow1 = false;
            },
            handleChange(val) {
                if (val) {
                    this.checkList = this.account;
                } else {
                    this.checkList = []
                }
            },
            handle(val) {
                this.checked = val.length == this.account.length
            },
            getNextMan() {
                getNextMan().then(res => {
                    if (res.data.success) {
                        this.account = res.data.data
                    }
                })
            },
            remove(id) { // 删除模板
                this.$confirm(`<div style="margin: 20px 10px;"><p style="line-height: 30px;font-size: 15px;color: #333">确认删除该社交自动化规则吗?</p></div>`, '社交自动化', {
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取 消',
                }).then(() => {
                    deleteRow(id).then(res => {
                        this.dealEnd(res)
                    })
                }).catch(() => {})
            },
            //启用，停用
            changeShare(row, id, state) {
                row.isShare = !state;
                this.$confirm(`<div style="margin: 20px 10px;"><p style="line-height: 30px;font-size: 15px;color: #333">${state ? '' : '取消'}共享该社交规则?</p></div>`, '社交自动化', {
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取 消',
                }).then(() => {
                    changeShare(id, state).then(res => {
                        this.dealEnd(res)
                    })
                }).catch(() => {
                })
            },
            //启用，停用
            changeUse(row, id, state) {
                row.ruleEnable = !state;
                this.$confirm(`<div style="margin: 20px 10px;"><p style="line-height: 30px;font-size: 15px;color: #333">${state ? '启用' : '停用'}该社交规则?</p></div>`, '社交自动化', {
                    dangerouslyUseHTMLString: true,
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取 消',
                }).then(() => {
                    changeUse(id, state).then(res => {
                        this.dealEnd(res)
                    })
                }).catch(() => {
                })
            },
            dealEnd(res) {
                this.getList();
                this.$message({message: res.data.msg, type: 'success'});
            },
            getList() {
                getList(this.keyWord, this.createNames, this.statusList, this.nowPage, this.pageSize).then(res => {
                    if (res.data.success) {
                        this.tableData = res.data.data.records
                        this.total = res.data.data.total;
                        this.isEnd = this.total == 0;
                    }
                })
            },
            handleSizeChange(size) { //  条数发生改变
                this.pageSize = size
                this.getList()
            },
            handleCurrentChange(page) { //页数发生变化
                this.nowPage = page
                this.getList()
            },
            dealEmpty(str) {
                if (str) return str;
                return '-'
            },
            dealState(state, status) {
                if (state) {
                    if (status) {
                        return '发布成功'
                    } else {
                        return '等待中'
                    }
                } else {
                    return '未创建'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
  .autoBox {
    .detail {
      table {
        tbody {
          tr {
            td {
              background-color: #fff;
            }
          }
        }
      }
    }
    i {
      color: #2A97F9;
    }

    .active {
      display: block;
      opacity: 1;
    }

    .noActive {
      display: none;
      opacity: 0;
    }

    tbody {
      overflow-y: auto;

      tr {
        color: #333;
      }
    }

    header {
      display: flex;
      justify-content: space-between;
    }
    .iconBtn {
      margin: 0 6px;
      cursor: pointer;
    }

    .pagination {
      text-align: right;
    }
  }


</style>
